<div data-role="view" data-title="Maybanhang.Net" id="product-detail" data-layout="mobile-view"  data-reload="true"
data-show="load" > 
	<script type="text/javascript">			
		function load(e) {		
			app.showLoading();
			var id = e.view.params.id;		
			if (!id) return;
			$.ajax({
			  type: "GET",
			  url: "service/product/" + id,		 
			  dataType : 'json', 
			  async: false,
			}).done(function( data ) {		
				app.hideLoading();	
			  $('#productCode').html(data.productCode);
			  $('#productName').html(data.productName);
			  $('#price').html(formatAmount(data.price));
			  $('#productCategory').html(data.categoryName);
			  $('#unit').html(data.unitName);
			  $('#description').html(data.description);	
			  $('#productImage').attr('src','site/productImage/' + data.productId);
			  $('#button_edit_product').attr('href','site/productEdit?id=' + data.productId);		
			});	
			
		}
	</script>
    <header data-role="header">
        <div data-role="navbar">
            <a id="back-button" class="nav-button" data-align="left" data-role="backbutton">Back</a>
            <span data-role="view-title"></span>
            <a data-align="right" data-role="button" class="nav-button" href='#index'>Home</a>            
        </div>
    </header>    
    <img id='productImage' style="margin-left: auto; margin-right: auto;display: block;"></img>
    <ul data-role="listview" data-style="inset">
    	<li>
    		<table><tr><td class="common-detail-label">Mã</td><td class="common-detail-value"><span id='productCode'></span></td></tr></table>    				
    	</li>
    	<li>
    		<table><tr><td class="common-detail-label">Tên</td><td class="common-detail-value"><span id='productName'></span></td></tr></table>
    	</li>
    	<li>
    		<table><tr><td class="common-detail-label">Giá bán</td><td class="common-detail-value"><span id='price'></span></td></tr></table>
    	</li>
    	<li>
    		<table><tr><td class="common-detail-label">Nhóm</td><td class="common-detail-value"><span id='productCategory'></span></td></tr></table>
    	</li>
    	<li>
    		<table><tr><td class="common-detail-label">Đơn vị</td><td class="common-detail-value"><span id='unit'></span></td></tr></table>
    	</li>
    	<li>
    		<table><tr><td class="common-detail-label">Mô tả</td><td class="common-detail-value"><span id='description'></span></td></tr></table>
    	</li>    	
    </ul>
    
    
    <a class="button" id="button_edit_product" data-role="button" style="display: block; margin: 2em; text-align: center;" href='site/productEdit'>Sửa</a>
    
</div>